import React, { useState } from 'react';

import './index.less';

import images from '@/assets/base/images/modalImg.png';

const MethodModel = (props) => {
  const { modalClose } = props;
  const [tabsActive, setTabsActive] = useState(0);

  const handleModalTabs = (current) => setTabsActive(current);

  return (
    <div className="method">
      <div className="method-head">
        <span>科学性分析及误差率分析</span>
        <img
          src={require('../../../assets/base/images/close.png')}
          alt=""
          onClick={modalClose}
        />
      </div>
      <div className="method-body">
        <div className="method-body-tabs">
          {['测算方法', '模型原理'].map((item, i) => (
            <span
              onClick={(e) => handleModalTabs(i)}
              key={item}
              className={tabsActive == i ? 'tabs_active' : ''}
            >
              {item}
            </span>
          ))}
        </div>
        <div className="method-body-content">
          {tabsActive == 0 && <img src={images} alt="" />}
          {tabsActive == 1 && (
            <div className="method-body-yuanli">
              <div className="method-body-yuanli-desc">
                利用电力数据时效性强、数据体量大、数据精准等特点，采用ARDL、成分分析方法、基准和协调方法等算法，融合GDP经济数据、煤油气等能源数据，按照“
                <span>先整体后部分</span>”的原则构建全国电碳预测模型，再利用
                <span>恒等原则</span>
                构建各省级、地市级碳排放、行业碳排放预测模型。模型能够根据数据情况，利用机器学习等人工智能技术实现自动调参，具备自适应特点，支持全国快速推广应用。
              </div>
              <div className="method-body-yuanli-chart">
                <div className="chart-item">
                  <img src={require('./img/lf-chart.png')} alt="" />
                  <p>
                    经比对分析,预测数据与已发布的《国家信息通报》中总排放量数据一致
                  </p>
                </div>
                <div className="chart-item">
                  <img src={require('./img/rg-chart.png')} alt="" />
                  <p>预测碳排放与实际值偏差不超过2%</p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MethodModel;
